<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: space-around;align-items: center;">
    <div style="width: 98%;height: 50%;display: flex;flex-direction: row;justify-content: space-between;align-items: center; ">
      <div style="width: 65%;height:100%;background-color: #061F33;">
        <dev-hisdiag style="width:98%;height: 90%;" @picParam="imageDemoNum" />
      </div>
      <div style="width: 34%;height:100%;background-color: #061F33;display: flex;flex-direction: column;justify-content: space-between;align-items: center;">
        <div style="width:94%;height: 5%;margin-top: 2%;"><ana-title> <div slot="title">放电观测</div></ana-title></div>
        <div style="width:94%;height: 90%;border-color: #104662;border-style: solid;margin-bottom: 1%;">
          <el-image style="width: 99%; height:99%; " :src="dischargeObse" />
        </div>
      </div>
    </div>
    <div style="width: 98%;height: 45%;background-color: #061F33;display: flex;flex-direction: column;justify-content: space-between;align-items: center;overflow: hidden">
      <div style="width:94%;height: 5%;margin-top: 2%;"><ana-title> <div slot="title">单阀故障，冗余个数实时监测</div></ana-title></div>
      <div style="width:98%;height: 90%;">
        <failure-chart :echarts-data="params" />
      </div>
    </div>
  </div>
</template>

<script>
import { getrealMonitor, hisInfraredLinkage } from '../../api/failureanalysis.js'
import FailureChart from '@/views/failureanalysis/FailureChart'
import AnaTitle from '@/components/Mytitle/AnaTitle'
import DevHisdiag from '@/views/failureanalysis/DevHisdiag'
import axios from 'axios'
export default {
  components: {
    FailureChart,
    AnaTitle,
    DevHisdiag
  },
  data() {
    return {
      params: {
        dimensions: ['product', '晶闸管故障', 'BOD动作', '单阀冗余数'],
        source: [
          { product: 'Y1', '晶闸管故障': 43.3, 'BOD动作': 85.8, '单阀冗余数': 93.7 },
          { product: 'Y2', '晶闸管故障': 83.1, 'BOD动作': 73.4, '单阀冗余数': 55.1 },
          { product: 'Y3', '晶闸管故障': 86.4, 'BOD动作': 65.2, '单阀冗余数': 82.5 },
          { product: 'Y4', '晶闸管故障': 72.4, 'BOD动作': 53.9, '单阀冗余数': 39.1 },
          { product: 'Y5', '晶闸管故障': 30, 'BOD动作': 50, '单阀冗余数': 60 },
          { product: 'Y6', '晶闸管故障': 30, 'BOD动作': 50, '单阀冗余数': 60 },
          { product: 'D1', '晶闸管故障': 30, 'BOD动作': 50, '单阀冗余数': 60 },
          { product: 'D2', '晶闸管故障': 30, 'BOD动作': 50, '单阀冗余数': 60 },
          { product: 'D3', '晶闸管故障': 30, 'BOD动作': 50, '单阀冗余数': 60 },
          { product: 'D4', '晶闸管故障': 30, 'BOD动作': 50, '单阀冗余数': 60 },
          { product: 'D5', '晶闸管故障': 30, 'BOD动作': 50, '单阀冗余数': 60 },
          { product: 'D6', '晶闸管故障': 30, 'BOD动作': 50, '单阀冗余数': 60 }
        ]
      },
      valvehallId: 1,
      eventId:'',
      time:'',
      imageDemo: [require('../../assets/img/valve.png'), require('../../assets/img/11.jpeg'), require('../../assets/img/22.jpeg'), require('../../assets/img/33.jpeg')],
      dischargeObse: require('../../assets/img/valve.png')
    }
  },
  created() {
    this.realMonitor()
  },
  methods: {
    // 图片函数从历史列表组件传的值
    imageDemoNum(e) {
      console.log('传值', e)
      this.eventId = e.eventId
      this.time = e.time
      // this.dischargeObse = this.imageDemo[e]
      this.exportreport()
    },
    ceshi() {
      console.log('dddd')
      this.params.source[0] = {}
      const temp = this.params.source
      this.params.source = []
      this.params.source = temp
      // if(this.params.source[0].晶闸管故障>100){
      //   this.params.source[0].晶闸管故障=0;
      // }
      console.log(this.params.source)
    },
    realMonitor() {
      getrealMonitor(this.valvehallId).then(response => {
        this.params.source.forEach(element => {
          element.晶闸管故障 = response.data.晶闸管故障[element.product]
          element.BOD动作 = response.data.BOD动作[element.product]
          element.单阀冗余数 = response.data.单阀冗余数[element.product]
        })
        // let key = this.params.source[0].product

        // console.log(key)
        console.log(response.data)
      })
    },
    // 图片下载
    exportreport() {
      const forms = new FormData()
      forms.append('eventId', this.eventId)
      forms.append('time', this.time)
      axios({
        url: process.env.VUE_APP_BASE_API + '/cv/faultAnalysis/hisInfraredLinkage',
        method: 'post',
        data: forms,
        responseType: 'blob',
        headers: {
          'Content-Type': 'multipart/form-data'// 含有附件的表单提交的Content-Type
          // 'Content-Type': 'application/x-www-form-urlencoded'//普通表单提交的Content-Type
        }
      }).then(res => {
        if (window.navigator.msSaveBlob) {
          // IE以及IE内核的浏览器
          try {
            window.navigator.msSaveBlob(res.data, file.name) // response为接口返回数据，这里请求的时候已经处理了，如果没处理需要在此之前自行处理var data = new Blob([response.data]) 注意这里需要是数组形式的,fileNm就是下载之后的文件名
            // window.navigator.msSaveOrOpenBlob(response, fileNm);	//此方法类似上面的方法，区别可自行百度
          } catch (e) {}
        } else {
          console.log(res)
          var blob = new Blob([res.data])
          const qrUrl = window.URL.createObjectURL(blob)
          this.dischargeObse = qrUrl
          console.log(blob)

          // window.URL.revokeObjectURL(qrUrl) // 释放掉blob对象
        }
      }).catch(err => {
        console.log(err)
      })
      // 需要添加等待框
      console.log('111111111111111111111111111111')

      this.$message({
        type: 'success',
        message: '添加成功'
      })
    }

  }
}
</script>

<style >
body{
  padding-right: 0px !important;
  overflow: hidden;
}
</style>
